@extends('wap.layout.base')
@section('scripts')
    <script>
        let footer = new Vue({
            el:'#app',
            data:function(){
                return {
                    active: 0,
                    title: "{{ $info['title'] }}",
                };
            },
            methods: {
                onClickLeft() {
                    window.location.href = "{{ route('wap.index.index') }}";
                }
            },
        });
        $(function () {
            $('.praise-btn').click(function(){
                let id = $(this).attr('data-id');
                let that = this;
                @if (auth()->guest())
                    window.location.href = "{{ route('wap.auth.login') }}";
                @else
                    $.post("{{ route('wap.new.praise') }}",{id:id,_token:"{{csrf_token()}}",},function(res){
                        if(res.code){
                            alert(res.msg);
                        }else{
                            $(that).children('em').text(res.data);
                        }
                    });
                @endif
            });
            $('.main-item').click(function(){
                let id = $(this).attr('data-id');
                window.location.href = "{{ route('wap.new.info') }}"+'?id='+id;
            })
        })
    </script>
@endsection
@section('content')
    <div class="container main">
        <div class="row">
            <div id="app" class="info-bar" v-cloak>
                <van-nav-bar
                        :title="title"
                        left-text=""
                        border
                        fixed="true"
                        left-arrow="false"
                        @click-left="onClickLeft">
                    <van-icon name="arrow-left" style="font-size: 2rem" slot="left"/>
                </van-nav-bar>
            </div>
            <div class="col-xs-12 info">
                <div  class="info-head">
                    <img class="info-thumb" src="{{ $info['thumb'] }}" alt="">
                    <p class="info-title">
                        {{ $info['user']['truename'] }}<span> {{ $info['created_at']->format('Y-m-d H:i') }} </span>
                        <span class="right"><i class="fa fa-eye"> &nbsp;{{ $info['view'] }}</i></span>
                    </p>
                </div>
                <div class="info-cont">
                    <p class="cont-title">{{ $info['title'] }}</p>
                    {!! $info['content'] !!}
                    <div class="info-state">版权声明：本文未经授权发布，不代表链鸽立场，如若转载请联系原作者</div>
                    <div class="info-tags">
                        <ul>
                            <li>文章标签：</li>
                            @if($info['tags'])
                                @foreach($info['tags'] as $k=>$tag)
                                    <li class="li-tag"><span>{{$tag['name']}}</span></li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                    <button class="praise-btn right" data-id="{{ $info['id'] }}">
                        <i class="fa fa-thumbs-o-up"></i> &nbsp;<em style="font-style: normal">{{ $info['praise'] }}</em>
                    </button>
                </div>
                <div class="hot-news">
                    <h4>相关资讯</h4>
                    @foreach($about_news as $key=>$news)
                        <div class="col-xs-12 main-item" data-id="{{ $news['id'] }}">
                            <div class="main-item-img">
                                @if($news['cateChild']['name'])
                                    <span class="tag-name">{{ $news['cateChild']['name'] }}</span>
                                @else
                                    <span class="tag-name none"></span>
                                @endif
                                <img src="{{ $news['thumb'] }}">
                            </div>
                            <div class="main-item-info">
                                <p class="info-title">{{ $news['title'] }}</p>
                                <p class="info-other">
                            <span class="info-other-name">
                                {{ $news['created_at']->format('Y-m-d') }}<i></i>
                            </span>
                                    <span class="info-other-view"><i class="fa fa-eye"></i> {{ $news['view'] }}</span>
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

